<template>
	<view class="addTask">
		<uni-forms class="addForm" ref="baseForm" :modelValue="form" label-width="100">
			<uni-forms-item label="打卡封面" required>
				<view class="flex alignCenter">
					<uni-singleimg :fileUrl="form.cover" v-if="form.cover" @delPic="delPic"></uni-singleimg>
					<view class="bold uploadCommon colorccc" @click="uploadFileClick">+</view>
				</view>
			</uni-forms-item>
			<uni-forms-item label="打卡标题" required>
				<input class="inputBox font14" maxlength="20" placeholder="标题(20个字符)" placeholder-class="font14 colorccc" v-model.trim="form.title">
			</uni-forms-item>
			<uni-forms-item label="打卡内容" required>
				<!-- <textarea class="textareaBox font14" maxlength="150" placeholder="内容(150个字符)" placeholder-class="font14 colorccc" cols="30" rows="10" v-model.trim="form.content"></textarea> -->
				<ksp-editor class="textareaBox" ref="editor" @selectImage="selectImage" @save="onsave" :list="list"></ksp-editor>
			</uni-forms-item>
			<!-- <view class="singleBox">
				<uni-mdlist :listData="itemArr" @clickItem="clickItem"></uni-mdlist>
			</view> -->
		</uni-forms>
		<view class="publishStyle" @click="sure"><i class="iconfont icon-fabu"></i>确定</view>
		<!-- 选择分区 -->
		<uni-singlepicker :pickerData="subCategory" v-if="showPicker" :showPicker="showPicker" @cancel="cancelPicker" @surePicker="surePicker"></uni-singlepicker>
	</view>
</template>

<script>
	import { getSubjectCategory } from "@/api/index.js"
	import { addTask } from "@/api/send.js"
	import { uploadFile,chooseImg} from "@/utils/common.js"
	import kspEditor from "@/pages/send/components/ksp-editor/ksp-editor.vue"
	export default {
		components:{
			kspEditor
		},
		data() {
			return {
				form:{
					cover:'',
					title:'',
					content:'',
				},
				itemArr:[{
					title:'选择分区',
					icon:'/static/image/setting/cat.png',
					subTitle:'',
					val:''
				}],
				showPicker:false,
				subCategory:[],
				chooseSubject:'',
				list:[],
				actId:''
			};
		},
		onLoad(option) {
			this.actId=option.id?option.id:''
			uni.removeStorageSync('cropUrl')
			this.getCategory()
		},
		onShow() {
			if(uni.getStorageSync('cropUrl')){
				let path=[uni.getStorageSync('cropUrl')]
				uni.removeStorageSync('cropUrl')
				uploadFile(path).then((successFile)=>{
					this.form.cover=successFile.url
				}).catch((err)=>{
					console.log('err',err)
				})
			}
		},
		onUnload() {
			uni.removeStorageSync('cropUrl')
		},
		methods:{
			// 获取分区
			getCategory(){
				let param={"pageNum":1,"pageSize":100,"type":0,"year":new Date().getFullYear()}
				getSubjectCategory(param).then((res)=>{
					if(res.code==100000){
						res.data.rows.forEach((item)=>{
							item.pickerTitle=`(${item.subjectCode})${item.title}`
						})
						this.subCategory=res.data.rows
					}
				})
			},
			// 选择分区
			clickItem(val,idx){
				this.showPicker=true
			},
			//取消分区选择
			cancelPicker(){
				this.showPicker=false
			},
			// 选择分区的确定事件
			surePicker(item){
				console.log('item',item)
				this.chooseSubject=item?item:this.subCategory[0]
				this.itemArr[0].val=(item?item.pickerTitle:`(${this.chooseSubject.subjectCode})${this.chooseSubject.title}`)
				this.showPicker=false
			},
			// 封面
			uploadFileClick(){
				chooseImg(1).then((file)=>{
					uni.navigateTo({
						url:'/settingPages/pages/fullScreenCrop/fullScreenCrop?url='+file[0]+'&ratio=4/3'
					})
				})
			},
			// 内容的上传图片
			selectImage() {
				chooseImg(3).then((files)=>{
					// console.log('选择的图片',files)
					files.forEach((val)=>{
						uploadFile([val]).then((uploadSucc)=>{
							this.$refs.editor.addImage(uploadSucc.url);
						})
					})
					
				})
			},
			// 删除图片
			delPic(){
				this.form.cover=''
			},
			// 富文本保存
			onsave(node){
				console.log('node',node)
				if(node.result.length==1 && !node.result[0].content){
					this.form.content=''
					return
					// uni.showToast({
					// 	title:`内容不能为空`,
					// 	icon:'none'
					// })
				}else{
					this.form.content=node
				}
			},
			sure(){
				// 是否填写内容
				this.$refs.editor.save()
				let canNext=true
				for(let idx in this.form){
					if((this.form[idx] == null || this.form[idx] === "")){
						uni.showToast({
							title:`${idx=='cover'?'封面':(idx=='title'?'标题':'内容')}不能为空`,
							icon:'none'
						})
						canNext=false
						return
					}
				}
				// if(!this.chooseSubject){
				// 	uni.showToast({
				// 		title:'请选择分区',
				// 		icon:'none'
				// 	})
				// 	return
				// }
				if(!canNext) return
				uni.showLoading({
					title:'提交中',
					mask:true
				})
				let content=JSON.stringify(this.form.content.result)
				let param=Object.assign(this.form,{activityId:this.actId,content:content})
				// console.log('param',param)
				addTask(param).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						uni.navigateBack()
					}
				}).catch((err)=>{uni.hideLoading()})
			}
		}
	}
</script>
<style lang="scss">
@import "@/static/public.scss";	
page{
	background-color:$pageBgColor;
}
</style>
<style lang="scss" scoped>
::v-deep .uni-forms-item__label{
	align-items: flex-start;
	height: auto;
	margin-right:20rpx;
}
.addTask{
	padding: 30rpx 30rpx 150rpx;
	box-sizing: border-box;
}
.addForm{
	background: #fff;
	padding: 30rpx;
	box-sizing: border-box;
	border-radius: 8rpx;
	// box-shadow: 0 0 18rpx 0 rgba(0, 0, 0, .3);
	.inputBox{
		border: 1px solid $bordercolor;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 8rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	.textareaBox{
		border: 1px solid $bordercolor;
		padding:15rpx 20rpx;
		width: 100%;
		border-radius: 8rpx;
		box-sizing: border-box;
	}
}
.publishStyle{
	position: fixed;
	z-index: 10;
	bottom:30rpx;
	left:0;
	right:0;
	margin: 0 auto;
}
</style>
